import NavBar from '@components/NavBar'
import { Button, Overlay, Popup, Tab, Tabs } from 'vant'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import Hammer from '@egjs/hammerjs'
import style from './face.module.less'
import pcStyle from './pc.face.module.less'
import Hair from './components/Hair'
import bg from './img/微笑.png'
import Face from './components/Face'
import ImgS from './components/ImgS'
import { useRouter } from 'vue-router'
import { defineMeta } from '@/fileroute/router'
import playVideo from '@/agora/rtc'
import { getModelInitCfg, isPc, modelS } from '@views/store'
import { genTemplateArrFill0 } from '@views/utils'
import { rotate, save, zoom } from '@views/setmodel'
import Slider from '@components/Slider'
import { sendCmd } from '@/agora/rtm'
import gif from '../loading/img/gif.gif'


defineMeta({
    lazy: false
})

export default defineComponent({
    setup: () => {
        const Dressing = <ImgS dir={`${modelS.modelGender}/dressing`} names={genTemplateArrFill0(modelS.modelGender === 'MALE' ? 6 : 13)} storeKey='ClothIndex' />
        const TabsContents = [<Face />, <Hair />, Dressing]
        const isLoading = ref(false)
        const router = useRouter()
        let lastTouchVal = 0
        // 一定要选择性别
        if (!modelS.modelGender) {
            location.href = location.href.slice(0, -location.pathname.length)
        }
        // console.error('TODO 记得关闭')
        const init = () => {
            // 初始设置任务缩放
            zoom(60)
            // 播放视频流
            playVideo('video')
            // 手势监听
            const myElement = document.getElementById('video')!
            const hammertime = new Hammer(myElement)
            // hammertime.get('pinch').set({ enable: true })
            hammertime.on('panleft', e => {
                console.log('left ←X偏移量：【' + e.deltaX + '】', e)
                rotate(e.deltaX - lastTouchVal)
                lastTouchVal = e.deltaX
            })
            hammertime.on('panright', e => {
                console.log('right →X偏移量：【' + e.deltaX + '】', e)
                rotate(e.deltaX - lastTouchVal)
                lastTouchVal = e.deltaX
            })
        }
        onMounted(() => {
            nextTick(init)
        })
        const phoneCom = () => <div class={style.root}>
            <NavBar rightText='完成' onClickRight={() => router.push('/Loading')} />
            <div style={{ position: 'absolute', bottom: '50vh', width: '80vw', zIndex: 9, margin: '0 10vw' }}>
                <Slider min={20} max={100} modelValue={60} onChange={val => zoom(val)} />
            </div>
            <img src={bg} class="bg" />
            <div id="video" onTouchend={() => lastTouchVal = 0} onTouchcancel={() => lastTouchVal = 0} />
            <Popup round show closeable position="bottom" overlay={false} style={{ height: '48vh' }} closeIcon='arrow-down'>
                <Tabs active={0} shrink>
                    {['面部', '发型', '装扮'].map((txt, idx) => <Tab class={`tab${idx}`} title={txt}>{TabsContents[idx]}</Tab>)}
                </Tabs>
            </Popup>
        </div>
        const pcCom = () => {
            const toUse = () => {
                isLoading.value = true
                save().then((imgSrc) => {
                    console.log({ imgSrc })
                    sendCmd('finish')
                    window.close()
                })
            }
            const reset = () => Object.assign(modelS, getModelInitCfg(), { modelGender: modelS.modelGender })
            let roomVal = 60
            const onwheel = (e: WheelEvent) => {
                const deltaY = e.deltaY
                const momentum = Math.abs(deltaY)
                const factor = 1 + (momentum / 100)
                console.log({ deltaY })

                if (deltaY < 0) {
                    roomVal += factor
                } else {
                    roomVal -= factor
                }
                roomVal = roomVal > 100 ? 100 : roomVal < 20 ? 20 : roomVal
                console.log({ roomVal })
                zoom(roomVal)
            }

            return <>
                <div class={pcStyle.root}>
                    <Tabs active={0} shrink>
                        {['面部', '发型', '装扮'].map((txt, idx) => <Tab class={`tab${idx}`} title={txt}>{TabsContents[idx]}</Tab>)}
                    </Tabs>
                    <div class='video-c'>
                        <img src={bg} class="bg" />
                        <div id="video" onWheel={onwheel} onTouchend={() => lastTouchVal = 0} onTouchcancel={() => lastTouchVal = 0} />
                        <div class='btns'>
                            <Button round plain onClick={reset}>重置</Button>
                            <Button round type="primary" onClick={toUse}>保存并使用形象</Button>
                        </div>
                    </div>
                </div>
                <Overlay show={isLoading.value} class={pcStyle.loading}>
                    <div class="wrapper">
                        <img class='gif' src={gif} />
                        <div class='title1'>形象生成中</div>
                        <div class='title2'>预计需要5-10分钟，请不要关闭程序</div>
                    </div>
                </Overlay>
            </>
        }
        return isPc.value ? pcCom : phoneCom
    }
})